<template>
  <div>
    <h1>EventTest组件</h1>
    <!-- 原声dom事件在html标签和组件标签身上有何区别 -->
    <!-- $event就是我们所说的默认参数，参数当中只有$event，可以省略不写 -->
    <!-- 一个dom事件在html标签身上添加就是原生dom事件，事件函数当中的默认参数$event就是事件对象 -->
    <button @click="test">Test</button>
    <!-- 一个dom事件在组件标签身上添加就不再是原生dom事件了，就变成了自定义事件了，如果我们自己
    不触发，这个自定义事件是没意义的。
    假设我想让这个自定义事件变成原生dom事件，必须添加操作符.native
    如果事件名和原生dom事件名一样，可以添加.native强制变为原生dom事件，本质其实是在
    组件的根元素身上添加了事件，就形成了事件委派-->
    <Event1 @click.native="test1"></Event1>

    <br>
    <br>
    <br>


    <!-- 自定义事件在原生html标签身上和组件标签身上有啥区别 -->
    <!-- 自定义事件在原生的html标签身上，无意义 -->
    <button @xxx="test2">test2</button>
    <!-- 自定义事件本来就只能在组件标签身上使用，原生dom事件在组件标签身上也会变成自定义事件
    自定义事件的默认参数是自己emit的时候传递的，有就有，没有就是undefined -->
    <Event2 @xxx="test3" @click="test3"></Event2>
  </div>
</template>

<script type="text/ecmascript-6">
  import Event1 from './Event1.vue'
  import Event2 from './Event2.vue'

  export default {
    name: 'EventTest',

    components: {
      Event1,
      Event2,
    },

    methods: {
      test(event){
        console.log(event.target.innerHTML)
      },
      test1(event){
        console.log(event.target.innerHTML)
      },
      test2(event){
        console.log(event.target.innerHTML)
      },
      test3(event){
        console.log(event)
      }
    }
  }
</script>
